/**
 *  商家回复组件 - leo
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  StyleSheet, Text, View, Image
} from 'react-native';

export default class EvaluateCard extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    time: PropTypes.string.isRequired,
    mark: PropTypes.number.isRequired
  };

  render() {
    const {
      name, time, mark, evaluate, imgList, number
    } = this.props;
    const star = [];
    for (let a = 1; a < mark; a++) {
      star.push(<Image resizeMode="contain" source={require('../../img/mark.png')} style={styles.mark} key={a} />);
    }
    return (
      <View style={styles.container}>
        <View style={styles.titlerow}>
          <Text style={styles.name}>{name}</Text>
          <Text style={styles.time}>{time}</Text>
        </View>
        <View style={styles.markrow}>
          <View style={styles.markwrap}>
            <Text style={styles.marktitle}>打分</Text>
            {star}
          </View>
        </View>
        <View style={styles.evaluaterow}>
          <Text style={styles.evaluate}>{evaluate}</Text>
        </View>
        <View style={styles.listrow}>
          {imgList.map(value => (
            <Image key={value} resizeMode="contain" source={{ uri: value }} style={styles.imglist} />
          ))}
        </View>
        <View style={styles.replyrow}>
          <View style={styles.numberwrap}>
            <Image resizeMode="contain" source={require('../../img/reply.png')} style={styles.reply} />
            <Text style={styles.number}>{number}</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    backgroundColor: '#fff',
    padding: 5
  },
  titlerow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  name: {
    color: '#627c8f',
    lineHeight: 24
  },
  time: {
    lineHeight: 24
  },
  markwrap: {
    flexDirection: 'row',
    marginBottom: 10,
  },
  marktitle: {
    paddingRight: 5
  },
  mark: {
    width: 14,
    height: 14,
    marginTop: 3,
  },
  evaluaterow: {
    marginBottom: 10,

  },
  evaluate: {
    lineHeight: 24
  },
  listrow: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  imglist: {
    marginRight: 5,
    marginBottom: 5,
    width: 90,
    height: 90,
    backgroundColor: '#000',
  },
  replyrow: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  numberwrap: {
    flexDirection: 'row',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#ccc',
    borderRadius: 5,
    paddingTop: 2,
    paddingBottom: 2,
    paddingLeft: 8,
    paddingRight: 8,
  },
  reply: {
    width: 14,
    height: 14,
    marginTop: 3
  },
  number: {
    marginLeft: 10
  }
});
